<template>
  <div class="head-menu content-box">
    <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        :ellipsis="false"
        router
    >
      <el-menu-item index="/">
        消息中心
        <el-icon>
          <IconLogo></IconLogo>
        </el-icon>
      </el-menu-item>
      <div class="flex-grow"/>
    </el-menu>
  </div>
  <div class="content-box">
    <div style="padding: 10px 0">
      <h5>消息中心</h5>
    </div>
    <el-container>
      <el-aside width="300px">
        <div @click="openConversation(item)" v-for="item in conversationList"
             :class="selectConversation.conversationId === item.conversationId ? 'border list-item is-select' :'border list-item'">
          <el-space>
            <el-avatar :src="item.otherAvatar"></el-avatar>
            <div>
              <el-text size="large" tag="b">{{ item.sourceType }}</el-text>
              <br>
              <el-text size="small">{{ item.lastMessage.content }}</el-text>
            </div>
            <el-text size="small">{{ item.lastMessage.createTime }}</el-text>
          </el-space>
        </div>
      </el-aside>
      <el-container>
        <el-header class="border flex-vcenter">
          <div>
            <el-text size="large" tag="b">{{ selectConversation.userNickname }}</el-text>
          </div>
        </el-header>
        <el-main>
          <div v-for="item in messageList">
            <div class="message-list-left" v-if="item.senderId != userStore.userId">
              <el-avatar :src="selectConversation.userAvatar"></el-avatar>
              <div class="message-left">
                {{ item.content }}
              </div>
            </div>
            <div class="message-list-right" v-else>
              <div class="message-right">
                {{ item.content }}
              </div>
              <el-avatar :src="userStore.avatar"></el-avatar>
            </div>
          </div>
        </el-main>
        <el-footer class="border" height="auto">
          <my-input @submit="submitPrivateMessage"></my-input>
        </el-footer>
      </el-container>
    </el-container>
  </div>

</template>

<script setup lang="ts">
import {onMounted, reactive, ref, watch} from 'vue'
import {
  reqGetUserConversationList,
  reqGetPrivateMessageListByConversationId,
  reqSendPrivateMessage
} from "@/api/social/chat";
import type {Conversations, ConversationInfoVO} from "@/api/social/chat/type";
import {useUserStore} from "@/stores/user";
import MyInput from "@/components/form/MyInput.vue";

let conversationList = ref<ConversationInfoVO[]>([])
const userStore = useUserStore()
let selectConversation = reactive({
  conversationId: null as number,
  userAvatar: '',
  userNickname: '',
  otherUserId: '',//对方的用户id
  sourceType: '',
})
let messageList = ref([])

let getConversationList = async () => {
  let res = await reqGetUserConversationList()
  conversationList.value = res.data
}
let openConversation = (conversation: ConversationInfoVO) => {
  selectConversation.conversationId = conversation.conversationId
  selectConversation.userAvatar = conversation.otherAvatar
  selectConversation.userNickname = conversation.otherNickname
  selectConversation.otherUserId = conversation.otherUserId
}
let getPrivateMessageListByConversationId = async () => {
  let res = await reqGetPrivateMessageListByConversationId(selectConversation.conversationId)
  messageList.value = res.data
}
let submitPrivateMessage=(data)=>{
  let message={
    content:data,
    conversationId:selectConversation.conversationId,
    senderId:userStore.userId,
    receiverId:selectConversation.otherUserId,
    contentType:'text',
    type:'private'
  }
  reqSendPrivateMessage(message)
}
onMounted(() => {
  getConversationList()
})
watch(() => selectConversation.conversationId, () => {
  getPrivateMessageListByConversationId()
})
</script>

<style scoped>
.list-item {
  padding: 10px 20px;
}

.message-list-left {
  display: flex;
  justify-content: start;
}

.message-list-right {
  display: flex;
  justify-content: end;
}

.message-left, .message-right {
  margin: 0 20px;
  padding: 0 10px;
  height: 50px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  position: relative;
  background: teal;
  border-radius: 5px;
}

.message-left::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  /* 箭头靠右边 skewY(50deg)和skewY(-50deg)可以调节箭头方向*/
  /*top: 25px;*/
  /*right: -20px;*/
  /*border-top: 10px solid transparent;*/
  /*border-bottom: 10px solid transparent;*/
  /*border-left: 20px solid teal;*/
  /*transform: skewY(50deg);*/
  /* 箭头靠下边 skewX(50deg)和skewX(-50deg)可以调节箭头方向 */
  /*left: 35px;*/
  /*bottom: -20px;*/
  /*border-left: 10px solid transparent;*/
  /*border-right: 10px solid transparent;*/
  /*border-top: 20px solid teal;*/
  /*transform: skewX(50deg);*/
  /* 箭头靠左边 skewY(50deg)和skewY(-50deg)可以调节箭头方向*/
  top: 15px;
  left: -20px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 20px solid teal;
  transform: skewY(-20deg);
  /* 箭头靠下边 skewX(50deg)和skewX(-50deg)可以调节箭头方向*/
  /* left: 25px;
  top: -20px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid teal;
  transform: skewX(50deg); */
}

.message-right::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 15px;
  right: -20px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid teal;
  transform: skewY(20deg);
}

.head-menu {
  background-color: #545c64;
}

.list-item:hover {
  background-color: #c0c4cc;
}

.is-select {
  background-color: #c0c4cc;
}
</style>
